import React, { Component } from 'react'

class Content extends Component {
  state = {
    // 0分类 1食材  索引值
    menuIndex: [0, 0]
  }

  render() {
    const { menuIndex } = this.state
    const { data, navIndex } = this.props
    const menus = Object.keys(data)
    const contentData = data[menus[menuIndex[navIndex]]]

    return (
      <div className="category-content">
        <div className="left">
          <ul>
            {menus.map((item, index) => (
              <li
                key={index}
                className={index == menuIndex[navIndex] ? 'active' : ''}
                onClick={() => {
                  this.setState((state) => {
                    let menuIndex = state.menuIndex
                    menuIndex[navIndex] = index
                    return {
                      menuIndex
                    }
                  })
                }}
              >
                <span>{item}</span>
              </li>
            ))}
          </ul>
        </div>
        <div className="right">
          <ul>
            {contentData.map((item, index) => (
              <li key={index}>
                <span>{item}</span>
              </li>
            ))}
          </ul>
        </div>
      </div>
    )
  }
}

export default Content
